import React, { useState } from 'react';
import { NavBar, TabBar, Image, Dropdown } from 'antd-mobile';
import { SearchOutline, DownOutline, LeftOutline } from 'antd-mobile-icons';
import {
    AppOutline,
    UnorderedListOutline,
    ContentOutline,
    UserOutline
} from 'antd-mobile-icons';
import '../styles/hospitalList.scss';
import { useNavigate } from 'react-router-dom';
import TabBarFooter from '../components/TabBarFooter';

// 医院数据模型
interface Hospital {
    id: string;
    name: string;
    level: string;
    type: string;
    address: string;
    district: string;
    canBookOnline: boolean;
    imageUrl?: string;
}

const HospitalListPage: React.FC = () => {
    const navigate = useNavigate();

    // 医院数据列表
    const [hospitals] = useState<Hospital[]>([
        {
            id: '1',
            name: '北京协和医院',
            level: '三甲',
            type: '综合医院',
            address: '北京市东城区帅府园1号',
            district: '东城区',
            canBookOnline: true,
        },
        {
            id: '2',
            name: '北京大学第一医院',
            level: '三甲',
            type: '综合医院',
            address: '北京市西城区西什库大街8号',
            district: '西城区',
            canBookOnline: true,
        },
        {
            id: '3',
            name: '中国人民解放军总医院',
            level: '三甲',
            type: '综合医院',
            address: '北京市海淀区复兴路28号',
            district: '海淀区',
            canBookOnline: true,
        }
    ]);

    // 当前选中的底部导航项
    const [activeTab, setActiveTab] = useState('hospital');

    // 筛选条件
    const [district, setDistrict] = useState<string>('区域');
    const [level, setLevel] = useState<string>('医院等级');
    const [sortBy, setSortBy] = useState<string>('综合排序');

    // 处理底部导航切换
    const handleTabChange = (key: string) => {
        setActiveTab(key);
    };

    // 处理返回按钮点击
    const handleBack = () => {
        navigate('/home');
    };

    return (
        <div className="hospital-list-page">
            {/* 顶部导航栏 */}
            <NavBar
                className="nav-bar"
                onBack={handleBack}
                right={<SearchOutline fontSize={20} />}
            >
                医院列表
            </NavBar>

            {/* 筛选区域 */}
            <div className="filter-section">
                <Dropdown>
                    <Dropdown.Item
                        key="district"
                        title={
                            <div className="dropdown-title">
                                {district} <DownOutline fontSize={12} />
                            </div>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setDistrict('全部区域')}>全部区域</div>
                            <div className="dropdown-option" onClick={() => setDistrict('东城区')}>东城区</div>
                            <div className="dropdown-option" onClick={() => setDistrict('西城区')}>西城区</div>
                            <div className="dropdown-option" onClick={() => setDistrict('海淀区')}>海淀区</div>
                            <div className="dropdown-option" onClick={() => setDistrict('朝阳区')}>朝阳区</div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item
                        key="level"
                        title={
                            <div className="dropdown-title">
                                {level} <DownOutline fontSize={12} />
                            </div>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setLevel('全部等级')}>全部等级</div>
                            <div className="dropdown-option" onClick={() => setLevel('三甲')}>三甲</div>
                            <div className="dropdown-option" onClick={() => setLevel('三乙')}>三乙</div>
                            <div className="dropdown-option" onClick={() => setLevel('二甲')}>二甲</div>
                            <div className="dropdown-option" onClick={() => setLevel('二乙')}>二乙</div>
                        </div>
                    </Dropdown.Item>
                    <Dropdown.Item
                        key="sort"
                        title={
                            <div className="dropdown-title">
                                {sortBy} <DownOutline fontSize={12} />
                            </div>
                        }
                        className="dropdown-item"
                    >
                        <div className="dropdown-content">
                            <div className="dropdown-option" onClick={() => setSortBy('综合排序')}>综合排序</div>
                            <div className="dropdown-option" onClick={() => setSortBy('评分最高')}>评分最高</div>
                            <div className="dropdown-option" onClick={() => setSortBy('距离最近')}>距离最近</div>
                        </div>
                    </Dropdown.Item>
                </Dropdown>
            </div>

            {/* 医院列表 */}
            <div className="hospital-list">
                {hospitals.map(hospital => (
                    <div
                        key={hospital.id}
                        className="hospital-item"
                        onClick={() => navigate(`/hospital/${hospital.id}`)}
                    >
                        <div className="hospital-logo">
                            <Image
                                src={hospital.imageUrl || "https://via.placeholder.com/80"}
                                width={80}
                                height={80}
                                fit="cover"
                                placeholder=""
                                alt={hospital.name}
                            />
                        </div>
                        <div className="hospital-info">
                            <h3 className="hospital-name">{hospital.name}</h3>
                            <div className="hospital-level">
                                {hospital.level} | {hospital.type}
                            </div>
                            <div className="hospital-address">
                                地址: {hospital.address}
                            </div>
                            {hospital.canBookOnline && (
                                <div className="online-booking-tag">可线上挂号</div>
                            )}
                        </div>
                    </div>
                ))}
            </div>

            {/* 底部导航栏 */}
            <TabBarFooter activeKey="medical" />
        </div>
    );
};

export default HospitalListPage; 